import React from 'react';
import { Table, Tag } from 'antd';
import { Link } from 'umi';
import Pagination from '@/components/Pagination';
import { useEmployeeList } from '../hooks';
import { getQualityTag, getHour, formatTaskOverdue } from '../utils';
import styles from './index.less';

const filtersEvalFlag = [
    {
        text: '否',
        value: '0'
    },
    {
        text: '是',
        value: '1'
    }
];

const EmployeeList = ({ param }) => {
    const [query, setQuery] = React.useState({
        pageNo: 1,
        pageSize: 10,
        reportType: 1,
        companyId: 101,
        departmentId: 0,
        startDate: '',
        endDate: '',
        evalFlag: '1'
    });
    const [loading, dataSource, total] = useEmployeeList(query);

    React.useEffect(() => {
        setQuery({ ...query, ...param });
    }, [param]);

    const columns = [
        {
            title: '员工姓名',
            dataIndex: 'employeeName',
            key: 'employeeName',
            render(text, { evalUserId }) {
                return (
                    <Link
                        to={`/stat/workStat/workOverview/work/employeeinfo?userId=${evalUserId}&companyId=${query.companyId}&reportType=${query.reportType}`}
                    >
                        {text}
                    </Link>
                );
            }
        },
        {
            title: '职位',
            dataIndex: 'postName',
            key: 'postName'
        },
        {
            title: '是否考核',
            dataIndex: 'evalFlag',
            key: 'evalFlag',
            align: 'center',
            filters: filtersEvalFlag,
            filteredValue: [query.evalFlag],
            filterMultiple: false,
            render: data => (
                <>
                    {data === 1 && <span>是</span>}
                    {data === 0 && <span style={{ color: '#FFA22D' }}>否</span>}
                </>
            )
        },
        {
            title: '任务数',
            dataIndex: 'totalTaskNum',
            key: 'totalTaskNum',
            render: (data, record) =>
                formatTaskOverdue(data, record.overdueDoneTaskNum, record.overdueNonexecutionTaskNum)
        },
        {
            title: '任务质量',
            dataIndex: 'evalScore',
            key: 'evalScore',
            render: (data, record) => {
                const rt = getQualityTag(record.evalRank);
                return (
                    <>
                        <span style={{ marginRight: 5 }}>{data && data.toFixed(2)}</span>
                        <Tag color={rt.color}>{rt.label}</Tag>
                    </>
                );
            }
        },
        {
            title: '工作量（小时）',
            dataIndex: 'planTotalWorkloadNum',
            key: 'planTotalWorkloadNum',
            render: (data, record) => (
                <>
                    <span style={{ marginRight: 10 }}>{getHour(data)}</span>
                    {record.workloadFlag === 2 && <span className={styles.InsTag}>不足</span>}
                    {record.workloadFlag === 3 && <span className={styles.exceTag}>超额</span>}
                </>
            )
        },
        {
            title: '标准工作量',
            dataIndex: 'standardTotalWorkloadNum',
            key: 'standardTotalWorkloadNum',
            render: data => `${getHour(data)}小时`
        }
    ];

    /* 翻页 */
    const handlePageNoChange = React.useCallback(
        ({ current: pageNo, pageSize }) => {
            setQuery({
                ...query,
                pageNo: pageNo || query.pageNo,
                pageSize: pageSize || query.pageSize
            });
        },
        [query]
    );

    const handleTableChange = React.useCallback(
        (_, filters) => {
            const { evalFlag } = filters;
            const [value] = evalFlag;
            setQuery({ ...query, evalFlag: value });
        },
        [query]
    );

    return (
        <>
            <Table
                rowKey="id"
                columns={columns}
                dataSource={dataSource}
                pagination={false}
                loading={loading}
                onChange={handleTableChange}
            />
            <Pagination total={total} current={query.pageNo} pageSize={query.pageSize} onChange={handlePageNoChange} />
        </>
    );
};

export default React.memo(EmployeeList);
